<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList"
		:loading-more-custom-style="{ paddingBottom: 'env(safe-area-inset-bottom)' }">
		<template #top>
			<view class="zpagin_top">
				<nav-bar :iconLeft="true" />
				<view class="search">
					<custom-search v-model="queryParams.search" @search="refreshList" placeholder="请输入用户姓名" />
					<view style="display: flex; gap: 10px;">
						<uni-data-select style="z-index: 50;" placeholder="请选择部门" v-model="queryParams.group_id"
							:localdata="group_list" @change="refreshList" />
						<uni-data-select style="z-index: 50;" placeholder="请选择类型" v-model="queryParams.classify"
							:localdata="classify_list" @change="refreshList" />
					</view>
				</view>
				<dui-float-ball @touchFunc="touchFunc" v-if="$hasPerm(['90501'])" />
			</view>
		</template>
		<up-swipe-action>
			<up-swipe-action-item v-for="item in dataList" :key="item.id" :item-data="item"
				:name="JSON.stringify(swipeActPer(options, item.status_display)) + '&' + item.id + '&' + item.full_name"
				:options="swipeActPer(options, item.status_display)"
				:disabled="swipeActPer(options, item.status_display, 'disabled')" @click="action">
				<uni-card margin="0" spacing="0">
					<template v-slot:title>
						<uni-list>
							<uni-list-item :title="item.full_name" thumbSize="lg">
								<template v-slot:footer>
									<up-tag size="mini" :text="status_list[item.status_display].text" plain plainFill
										:type="status_list[item.status_display].type" />
								</template>
							</uni-list-item>
						</uni-list>
					</template>
					<view class="con">
						<view class="ctent">部门：{{ item.group_name }}</view>
					</view>
					<view class="ctent">开始时间：{{ item.start_time }}</view>
					<view class="ctent">结束时间：{{ item.end_time }}</view>
					<view class="con">
						<view class="ctent">缺勤时长(时)：{{ item.hours }}</view>
						<view class="ctent">类型：{{ item.classify_display }}</view>
					</view>
					<view class="ctent">审核人：{{ item.apply_full_name }}</view>
					<view class="ctent">审核时间：{{ item.apply_time }}</view>
					<view class="ctent">登记时间：{{ item.create_date }}</view>
					<view class="con" style="align-items: normal;">
						<view class="ctent" style="flex: none;">缺勤理由：</view>
						<view class="ctent">{{ item.content }}</view>
					</view>
					<view class="con_button" v-if="$hasPerm(['90502'])" v-show="item.status_display == '待审核'"
						@click.stop="hanldAct(item)"> 审核</view>
				</uni-card>
			</up-swipe-action-item>
		</up-swipe-action>
		<template #bottom>
			<custom-popup :popupShow="apply_popupShow" mode="center" :title="`审核：【${apply_title}】缺勤登记`"
				@close="apply_popupShow = false" height="300rpx" width="90%">
				<div
					style="background-color: #fff;height: 100%; display: flex; justify-content: space-between;flex-direction: column;">
					<div style="padding: 10rpx 20rpx;">审核通过或者拒绝后，不支持修改，请确认?</div>
					<div style="display: flex; gap: 10rpx;width: 50%; margin-left:auto ;padding: 15rpx 20rpx;">
						<u-button text="通过" icon="checkmark" size="small" type="primary" @click="applyAct(2, '审核成功')"></u-button>
						<u-button text="拒绝" icon="close" size="small" type="error" @click="applyAct(3, '拒绝成功')"></u-button>
					</div>
				</div>
			</custom-popup>

			<custom-popup :popupShow="popupShow" mode="center" :title="titlePop" width="96%" :closeable="false"
				:closeOnClickOverlay="false">
				<view style="background-color: #fff; padding: 20rpx 30rpx;">
					<uni-forms labelPosition="left" :model="form" :rules="rules" ref="refForm" labelWidth="110px">
						<uni-forms-item label="员工" name="start_time" required>
							<uni-data-select style="z-index: 50;" placeholder="请选择员工" v-model="form.user" :localdata="account_list"
								mode="underline" />
						</uni-forms-item>
						<uni-forms-item label="类型" name="start_time" required>
							<uni-data-select style="z-index: 50;" placeholder="请选择类型" v-model="form.classify"
								:localdata="classify_list" mode="underline" />
						</uni-forms-item>
						<uni-forms-item label="开始时间" name="start_time" required>
							<view class="dateTimeBottom">
								<uni-datetime-picker type="datetime" placeholder="请选择开始时间" :clear-icon="false" v-model="form.start_time"
									:border="false" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="结束时间" name="end_time" required>
							<view class="dateTimeBottom">
								<uni-datetime-picker type="datetime" placeholder="请选择结束时间" :clear-icon="false" v-model="form.end_time"
									:border="false" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="原因" name="content">
							<uni-easyinput type="textarea" v-model="form.content" placeholder="请输入原因" />
						</uni-forms-item>
					</uni-forms>
					<view class="btn-box">
						<u-button text="取 消" @click="cancal"></u-button>
						<u-button type="primary" text="提 交" @click="save"></u-button>
					</view>
				</view>
			</custom-popup>
		</template>
	</z-paging>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import acAbsenteeismApi from '../../../api/account/ac_absenteeism'
import { swipeActPer } from '@/utils/permission'

//作用于新增或编辑后刷新页面数据

const status_list = {
	'待审核': { text: '待审核', type: 'warning' },
	'已审核': { text: '已审核', type: 'primary' },
	'已拒绝': { text: '已拒绝', type: 'error' },
}

const classify_list = [
	{ text: "公假", value: 1 },
	{ text: "事假", value: 2 },
	{ text: "年休假", value: 3 },
	{ text: "病假", value: 4 },
	{ text: "工伤假", value: 5 },
	{ text: "婚假", value: 6 },
	{ text: "产前假", value: 7 },
	{ text: "产假", value: 8 },
	{ text: "育儿假", value: 9 },
	{ text: "调休假", value: 10 },
	{ text: "哺乳假", value: 11 },
	{ text: "节育术假", value: 12 },
	{ text: "丧假", value: 13 },
	{ text: "外勤", value: 14 },
	{ text: "旷工", value: 15 },
	{ text: "其他", value: 16 },
]

onLoad(option => {
	get_account_list()
	get_group_list()
})

//滑动单元格按钮
const options = [
	{
		text: '修改', per: '90502',
		style: {
			backgroundColor: '#0081ff',
		}
	}, {
		text: '删除', per: '90503',
		style: {
			backgroundColor: '#f56c6c'
		}
	}
];

//查询参数
const queryParams = reactive({
});
//获取paging实例
const paging = ref(null)
const dataList = ref([])
function queryList(pageNo, pageSize) {
	const params = {
		page: pageNo,
		page_size: pageSize,
		...queryParams
	}
	acAbsenteeismApi.get_absence(params).then((res) => {
		paging.value?.complete(res.results);
	})
}

const apply_popupShow = ref(false)
const apply_title = ref('')
let apply_record = {}
function hanldAct(item) {
	apply_popupShow.value = true
	apply_title.value = item.full_name
	apply_record = item
}
function applyAct(typeNum, text) {
	const params = {
		status: typeNum
	}
	acAbsenteeismApi.patch_absence(params, apply_record.id).then(res => {
		uni.$u.toast(text)
		setTimeout(() => {
			apply_record = {}
			apply_title.value = ''
			apply_popupShow.value = false
			refreshList()
		}, 500)
	})
}


const account_list = ref([]);
function get_account_list() {
	acAbsenteeismApi.get_staff({ page: 1, page_size: 99999 }).then(res => {
		account_list.value = res.results.map(v => ({
			text: v.full_name,
			value: v.id
		}))
	})
};

const group_list = ref([]);
function get_group_list() {
	acAbsenteeismApi.get_group({ page: 1, page_size: 99999 }).then(res => {
		group_list.value = res.results.map(v => ({
			text: v.name,
			value: v.id
		}))
	})
};

//滑动操作按钮
function action(v) {
	const options = JSON.parse(v.name.split("&")[0])
	const id = v.name.split("&")[1]
	const name = v.name.split("&")[2]
	const index = v.index
	if (options[index].text == '修改') {
		titlePop.value = '修改'
		get_detail(id)
	}
	if (options[index].text == '删除') {
		delete_type(id, name)
	}
};

function get_detail(id) {
	acAbsenteeismApi.absence_detail(id).then(res => {
		const record = uni.$lodash.pick(res, fields)
		Object.assign(form, record)
		popupShow.value = true
	})
}
const refForm = ref(null);
const form = reactive({
	id: null,
	user: null,
	classify: null,
	start_time: '',
	end_time: '',
	content: '',
});
const fields = Object.keys(form);
const rules = {
	user: { rules: [{ required: true, errorMessage: '请选择员工' }] },
	start_time: { rules: [{ required: true, errorMessage: '请选择加班开始时间' }] },
	end_time: { rules: [{ required: true, errorMessage: '请选择加班结束时间' }] },
};

const titlePop = ref('弹窗')
const popupShow = ref(false)
function touchFunc() {
	titlePop.value = '新增'
	popupShow.value = true
}

function save() {
	refForm.value.validate().then(() => {
		const params = uni.$lodash.cloneDeep(form) // 深拷贝一份form表单
		if (titlePop.value == '新增') {
			acAbsenteeismApi.post_absence(params).then(res => {
				uni.$u.toast('添加成功')
				setTimeout(() => {
					cancal()
					refreshList()
				}, 500)
			})
		} else {
			//修改
			acAbsenteeismApi.patch_absence(params, params.id).then((res) => {
				uni.$u.toast('修改成功')
				setTimeout(() => {
					cancal()
					refreshList();
				}, 500)
			})
		}
	}).catch((error) => {
		uni.$u.toast(error[0].errorMessage);
	})
};

function cancal() {
	popupShow.value = false
	Object.assign(form, {
		id: null,
		user: null,
		classify: null,
		start_time: '',
		end_time: '',
		content: '',
	})
}

//删除操作
function delete_type(id, name) {
	uni.showModal({
		title: '提示',
		content: `确认要删除【${name}】的缺勤登记吗？`,
		success: (res) => {
			if (res.confirm) {
				acAbsenteeismApi.delete_absence(id).then((res) => {
					uni.$u.toast('删除成功')
					setTimeout(() => {
						refreshList();
					}, 500)
				})
			}
		}
	});
};

//刷新列表数据方法
function refreshList() {
	paging.value?.reload()
};
</script>

<style lang="scss"></style>